<template>
	<!-- /我的团队 -->
	<view class="zone">
		<Header title="我的团队" color="#fff"></Header>
		<view class="button myinvitebtn" @click="showinvite = true">我的邀请人</view>
		<view class="main">
			<!-- <view class="top_bg">
				<view class="tuandui">
					<view class="left">
						<view class="left_num">
							{{teamfriends}}
						</view>
						<view class="left_title">
							团队总人数
						</view>
					</view>
					<view class="right">
						<view class="left_num">
							{{channel}}
						</view>
						<view class="left_title">
							渠道总人数
						</view>
					</view>
				</view>
			</view> -->

				<!-- 下面的tabbar切换 -->
			<view class="tabbar">
				<view class="left" @click="qiehuan(1)" :class="[act==1?'active':' ']">
					一队好友 <br> ({{total1}})
				</view>
				<view class="left" @click="qiehuan(2)" :class="[act==2?'active':' ']">
					二队好友 <br> ({{total2}})
				</view>
				<view class="left" @click="qiehuan(3)" :class="[act==3?'active':' ']">
					一队实名 <br> ({{total3}})
				</view>
				<view class="left" @click="qiehuan(4)" :class="[act==4?'active':' ']">
					二队实名 <br> ({{total4}})
				</view>
			</view>
			<scroll-view scroll-y class="scrollbox" @scrolltolower="scrolltolower">
				<view class="bot_list">
					<view class="list_son" v-for="(item,index) in lists" :key="index">
						<view class="left">
							<image class="img" :src="item.wx_img?item.wx_img:'http://img.cpgm.cc/panda/static/login/logo.png'"
								mode="widthFix">
							</image>
							<view class="haoma">
								<view class="phon">
									{{item.mobile}}
								</view>
								<view class="time">
									{{item.created_at}}
								</view>
							</view>
						</view>
						<view class="right">
							{{item.is_check==1?'已实名':'未实名'}}
						</view>
					</view>
					<view v-if="lists.length==0" class="empty">
						<image src="http://img.cpgm.cc/panda/static/public/empty.png" mode="widthFix">
						</image>
						<text class="">
							没有数据哦~
						</text>
					</view>
					<u-loadmore v-else :status="status" :icon-type="iconType" :load-text="loadText" />
				</view>
			</scroll-view>
		</view>
		

		<!-- 我的邀请人 -->
		<u-mask :show="showinvite">
			<view class="warp">
				<view class="myinvite">
					<view class="m_title">
						<text>我的邀请人</text>
					</view>
					<view class="info">
						<image :src="userinfo.p_wx_img? userinfo.p_wx_img: 'http://img.cpgm.cc/panda/static/login/logo.png'" mode="widthFix" />
						<text>{{ userinfo.p_wx_nickname ? userinfo.p_wx_nickname : "潮玩新人" }}</text>
						<view class="weixin">
							<view class="wxh"> 微信号 </view>
							<input type="text" class="inp" name="" :disabled="true" v-model="p_wx" placeholder="暂未设置"
								id="" />
							<view class="button" @click="copy(p_wx)">复制</view>
						</view>
						<view class="weixin">
							<view class="wxh"> QQ号 </view>
							<input type="text" class="inp" name="" :disabled="true" v-model="p_QQ" placeholder="暂未设置"
								id="" />
							<view class="button" @click="copy(p_wx)">复制</view>
						</view>
						<view class="weixin">
							<view class="wxh"> 手机号 </view>
							<input type="text" class="inp" name="" :disabled="true" v-model="p_phone"
								placeholder="暂未设置" id="" />
							<view class="button" @click="copy(p_wx)">复制</view>
						</view>
					</view>
				</view>
				<image class="close" @click="showinvite = false" src="http://img.cpgm.cc/panda/static/public/close.png"
					mode="widthFix"></image>
			</view>
		</u-mask>
		
	</view>
</template>

<script>
	import config from '@/common/config/index'
	export default {
		data() {
			return {
				total1: 0,
				total2: 0,
				total3: 0,
				total4: 0,
				imgurl: config.imgurl,
				headerimgurl: config.headerimgurl,
				channel: 0,
				act: 1,
				stattop: 0,
				stat: 0,
				stat2: 0,
				istrue: true,
				page: 1,
				page2: 1,
				max_page: 1,
				max_page2: 1,
				listdata: '',
				listdata2: '',
				listdata3: '',
				listdata4: '',
				status: 'loadmore',
				iconType: 'flower',
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '没有更多了'
				},
				myfriends: '',
				jiantui: '',
				teamfriends: '',
				p_userid: '',
				emptyshow: false,
				yxpage: [1, 1, 1, 1,1],
				yxmaxpage: [1, 1, 1, 1,1],
				jiantui_vilidate: '',
				zhitui_vilidate: '',
				team_vilidate: '', //团队有效
				lists: [],
				tablist2: [{
						id: 1,
						name: '好友数量',
					},
					{
						id: 2,
						name: '好友累计开卡',
					},
				], //好友累计开卡
				getcardlist1: '',
				getcardlist2: '',
				stats: false,
				p_wx: "",
				p_QQ: "",
				p_phone: "",
				userinfo: uni.getStorageSync('userinfo'),
				showinvite:false,
			};
		},
		onLoad() {
			this.getOneUser(this.act);
			this.getup(this.userinfo.pid)
		},
		onReachBottom() {
			
		},
		methods: {

			scrolltolower(){
				if (this.yxpage[this.act] >= this.yxmaxpage[this.act]) {
					this.status = 'nomore'
				} else {
					this.status = 'loading';
					this.yxpage[this.act] = ++this.yxpage[this.act];
					if (this.act == 1 || this.act == 3) {
						this.getOneUser(this.act)
					} else if (this.act == 2 || this.act == 4) {
						this.getTwoUser(this.act)
					}
					setTimeout(() => {
						if (this.yxpage[this.act] > this.yxmaxpage[this.act] || this.yxpage[this.act] == this.yxmaxpage[this.act]) this.status = 'nomore';
						else this.status = 'loading';
					}, 500)
				}
			},

			copy(text){
				this.$p.copy(text)
			},

			// 获取我的邀请人
			async getup(pid) {
				let n = await this.$http.index.getInfo({
					id: pid,
				});
				if (n.code == 1) {
					this.p_wx = n.data.wx ? n.data.wx : "暂未设置";
					this.p_QQ = n.data.qq ? n.data.qq : "暂未设置";
					this.p_phone = n.data.mobile ? n.data.mobile : "暂未设置";
				}
			},

			// 点击切换tabbar
			qiehuan(num) {
				this.act = num
				this.lists = []
				this.yxpage[this.act] = 1
				this.status = 'loadmore'
				if (num == 1) {
					this.stats = false
					this.getOneUser(num)
				} else if (num == 2) {
					this.stats = false
					this.getTwoUser(num)
				} else if (num == 3) {
					// 代表直推实名
					this.stats = true
					this.getOneUser(num)
				} else if (num == 4) {
					// 代表间推实名
					this.stats = true
					this.getTwoUser(num)
				}
			},
			// 获取直推好友列表
			async getOneUser(index) {
				let res = await this.$http.index.getOneUser({
					page: this.yxpage[index],
					type: this.stats ? true : ''
				})
				
				if(!!this.stats) {
					this.total3 = res.total
				}else {
					this.total1 = res.total
				}
				this.teamfriends = res.team
				this.channel = res.channel
				this.lists = [...this.lists, ...res.data];
				this.yxmaxpage[index] = res.page;
				if (this.yxpage[index] >= this.yxmaxpage[index]) {
					this.status = 'nomore'
				}
			},
			// 获取间推列表好友
			async getTwoUser(index) {
				let res = await this.$http.index.getTwoUser({
					page: this.yxpage[index],
					type: this.stats ? true : ''
				})
				if(!!this.stats) {
					this.total4 = res.total
				}else {
					this.total2 = res.total
				}
				this.lists = [...this.lists, ...res.data];
				this.yxmaxpage[index] = res.page;
				if (this.yxpage[index] >= this.yxmaxpage[index]) {
					this.status = 'nomore'
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.zone {
		min-height: 100vh;
		background: linear-gradient(180deg, #0477FD 0%, #7AFDCF 100%);
	}

	.main {
		padding: 10px;
	}

	.zanwu {
		font-size: 14px;
		color: #A1A1A1;
		font-weight: 500;
		margin-top: 50%;
		text-align: center;

		.zaneu_img {
			width: 70%;

		}
	}

	.bot_list {

		.list_son {
			height: 70px;
			background-color: rgba(255,255,255,0.7);
			border-radius: 13px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 20px;
			margin-bottom: 10px;

			.left {
				display: flex;
				align-items: center;
				font-size: 12px;

				.img {
					width: 43px;
					height: 43px;
					margin-right: 10px;
					border-radius: 5px;
				}

				.phon {
					font-size: 14px;
					font-weight: 500;
					color: #343434;
				}

				.time {
					font-size: 11px;
					font-weight: 500;
					color: #A1A1A1;
				}
			}

			.right {
				font-size: 14px;
				font-weight: 500;
				color: #343434;
			}

			.act {
				color: #2A8F8B;
			}
		}
	}

	.tabbar {
		border-radius: 18px;
		margin: 10px 0;
		margin-top: 9px;
		display: flex;
		background: rgba(255,255,255,0.7);
		border-radius: 9px;
		padding: 5px;
		overflow: hidden;

		.left {
			flex: 1;
			height: 42px;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 7px;
			text-align: center;
			font-size: 12px;
			font-weight: 500;
			color: #A1A1A1;
		}
		.active {
			background-color: #000;
			color: #fff;
		}
	}

	.tuandui {
		background-color: #fff;
		border-radius: 8px;
		display: flex;
		align-items: center;
		padding: 15px 0;

		.left {
			flex: 1;
			height: 40px;
			text-align: center;
			border-right: 1px solid #979797;

			.left_num {
				font-size: 19px;
				font-weight: 600;
				color: #131314;
			}

			.left_title {
				font-size: 11px;
				font-weight: 500;
				color: #343434;
			}
		}

		.right {
			flex: 1;
			height: 40px;

			text-align: center;

			.left_num {
				font-size: 19px;
				font-weight: 600;
				color: #131314;
			}

			.left_title {
				font-size: 11px;
				font-weight: 500;
				color: #343434;
			}
		}
	}

	.top_bg {
		width: 100%;
		position: relative;

		.nav_back {
			position: relative;

			.yuemx {
				position: absolute;
				right: 8%;
				top: 37%;
				font-size: 14px;
				font-weight: 500;
				color: #343434;
				z-index: 999;
			}
		}
	}


.scrollbox {
	height: calc(100vh - 160px);
}

.myinvitebtn {
	width: 100px;
	height: 40px;
	background: url('http://img.cpgm.cc/panda/static/public/btn2.png');
	background-size: 100% 100%;
	color: #B73800;
	font-weight: 600;
	position: absolute;
	top: 10px;
	right: 10px;
	font-size: 14px;
	z-index: 999;
}





// 我的邀请人
.myinvite {
	background: linear-gradient(180deg, #61FBED 0%, #E4FDFC 31%, #F6FEEB 68%, #F5FEA8 100%);
	box-shadow: inset 5px 5px 45px 0px rgba(255,255,255,0.5), inset -5px -5px 45px 0px rgba(255,255,255,0.5), inset 0px 2px 0px 0px rgba(255,255,255,0.5);
	padding: 20px;
	border-radius: 10px;

	.m_title {
		color: #000000;
		font-size: 20px;
		font-weight: 600;
		text-align: center;
	}
}



.weixin {
		position: relative;
		width: 100%;
		height: 57px;
		background: rgba(255, 255, 255, 0.7);
		box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.05);
		border-radius: 6px;
		border: 1px solid #e3e3e3;
		display: flex;
		align-items: center;
		padding: 10px;
		margin: 5px 0;
	

		.wxh {
			flex: 1;
			font-size: 13px;
			font-weight: 600;
			color: #343434;
			border-right: 1px solid #e5e5e5;
		}

		.inp {
			flex: 3;
			width: 100%;
			padding: 0 10px;
			font-size: 14px;
			font-weight: bold;
			color: #000000;
		}

		.button {
			width: 45px;
			height: 27px;
			background: url('http://img.cpgm.cc/panda/static/public/btn7.png');
			background-size: 100% 100%;
			color: #9D3A23;
			font-size: 12px;
			zoom: 0.95;
		}
	}

	.bot_box {
		padding: 20px;
		font-size: 14px;
		line-height: 1.5;
		color: #5b5757;
	}

	.copy {
		background: linear-gradient(275deg, #fe4768 0%, #ff867d 100%);
		border-radius: 7px;
		color: #fff;
		font-size: 14px;
		font-weight: 600;
		width: 50%;
		margin: 0 auto;
		height: 40px;
		margin-top: 20px;
	}

	.http {
		font-size: 14px;
		font-weight: 700;
		color: #ff456c;
		line-height: 23px;
		margin: 10px 0;
	}

	.close {
		width: 30px;
		position: absolute;
		top: 10px;
		right: 10px;
	}

	.info {
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;
		margin-top: 20px;

		image {
			width: 80px;
			border-radius: 20px;
		}

		text {
			margin-top: 10px;
			color: #000;
			font-size: 14px;
		}
	}




</style>